<template>
	<view class="container">
		<empty v-if="suggestList.length == 0"></empty>
		<view class="forum_box" v-for="(item,index) in suggestList" :key="index" v-else>
			<!-- <view> -->
				<view @click="gotoDetail(item)">
					<view class="user_name">
						<!-- <view class="name_icon" v-if="check(item.userName)">
						{{item.userName[0].toUpperCase()}}
					</view>
					<view class="name_icon" v-else>
						{{item.userName[0]}}
					</view> -->
						<view class="name_icon">
							<image :src="userPhoto" style="width: 100%;height:100%" class="name_icon" />
						</view>
						<view class="name_center">
							<view class="name_text">{{item.userName}}</view>
							<view>
								<view class="name_details">{{item.communityName}}</view>
								<view class="name_details">
									{{item.createDate.replace(/T/," ").split(".")[0]}}
								</view>
							</view>
						</view>
						<view>
							<view class="suggest_tag">
								{{item.tagTypeName}}
							</view>
						</view>
					</view>
					<view class="forum_content">
						{{item.title}}
					</view>
					<view class="forum_details">
						{{item.content}}
					</view>
				</view>
				<view class="forum_photo_box">
					<view class="photo_item" v-for="(img,i) in item.imgList" :key="i">
						<image :src="img.url" style="height: 100%;width: 100%;" @click="previewImg(item,i)"></image>
					</view>
				</view>
			</view>
		<!-- 	<view style="width: 144upx;height: 144upx;position: absolute;bottom: 0;right:0">
				<image style="height: 100%;width: 100%;" v-if="item.state == '22'" src="/static/image/Processed.png"></image>
				<image style="height: 100%;width: 100%;" v-else src="/static/image/Processing.png"></image>
			</view>
		</view> -->
		<view class="bottom_box" @click="gotoBuild">
			+
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				communityId: this.$api.util.getAreaCode(),
				suggestList: [],
				loadingType: "more",
				page: 1,
				totalCount: 100,
				userPhoto: '',
				banRefresh: false
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {		
			this.userPhoto = this.userInfo.photoUrl
		},
		onShow() {
			if (this.banRefresh) {
				this.banRefresh = false;
				return;
			}
			this.suggestList = []
			this.getEventsOrAdviceLists(1)
		},
		//加载更多
		onReachBottom() {
			if (this.loadingType === 'more') {
				this.page = this.page + 1;
				this.getEventsOrAdviceLists(this.page)
			}
		},
		components: {
			empty
		},
		methods: {
			getEventsOrAdviceLists(page) {
				let UserID = this.userInfo.userUuid
				let params = {
					"areaCode": this.communityId ? this.communityId:"1000000000000000",
					"userId": UserID, //需login接口
					"page": page,
					"tagType": "ADVISE",
					"rows": 5
				}
				this.$api.request.getEventsOrAdviceLists(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.suggestList = this.suggestList.concat(res.body.data.list)
						var total = res.body.data.total
						if(this.suggestList.length >= total){
							this.loadingType = 'noMore'
						}
					}
				})
			},
			gotoBuild() {
				uni.navigateTo({
					url: "/package_biz/pages/suggestions/suggestions_add"
				})
			},
			gotoDetail(item) {
				uni.navigateTo({
					// url: "/package_biz/pages/suggestions/suggestions_detail?suggestions=" + encodeURIComponent(JSON.stringify(item))
					url: "/package_biz/pages/suggestions/suggestions_detail?id=" + item.eventId
				})
			},
			previewImg(items,index) {
				let _this = this;
				let imgsArray = items.imgList;
				let imgsArrayList =[];
				for(var i = 0;i<imgsArray.length;i++){ 
					imgsArrayList.push(imgsArray[i].url);
				}
				uni.previewImage({
					current: index,
					urls: imgsArrayList
				});
				this.banRefresh = true
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
	}

	.forum_box {
		width: 100%;
		padding: 20upx 3% 30upx 3%;
		margin-bottom: 16upx;
		background-color: white;
		/* position: relative; */
	}

	.user_name {
		width: 100%;
		/* 	height: 60upx; */
		line-height: 60upx;
		display: flex;
		flex-direction: row;
	}

	.name_icon {
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		border-radius: 50upx;
		background-color: #5FBCF0;
		color: white;
		text-align: center;
		font-weight: lighter;
		font-size: 28upx;
	}

	.name_center {
		width: 500upx;
	}

	.name_text {
		margin-left: 20upx;
		font-size: 28upx;
		font-weight: 600;
		height: 40upx;
		line-height: 40upx;
	}

	.name_details {
		float: left;
		font-size: 22upx;
		height: 40upx;
		line-height: 40upx;
		color: #999999;
		margin-left: 20upx;
	}

	.margin20 {
		margin-left: 20upx;
	}

	.complaint_tag {
		width: 120upx;
		height: 40upx;
		border: 2upx solid #D5514A;
		color: #D5514A;
		font-size: 24upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 10upx;
		margin-left: auto;
	}

	.suggest_tag {
		width: 120upx;
		height: 40upx;
		border: 2upx solid #55aaff;
		color: #55aaff;
		font-size: 24upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 10upx;
		margin-left: auto;
	}

	.praise_tag {
		width: 120upx;
		height: 40upx;
		border: 2upx solid #63D95D;
		color: #63D95D;
		font-size: 24upx;
		line-height: 40upx;
		text-align: center;
		border-radius: 10upx;
		margin-left: auto;
	}

	.forum_content {
		width: 100%;
		font-size: 26upx;
		margin-top: 20upx;
		font-weight: bold;
	}

	.forum_details {
		width: 100%;
		font-size: 26upx;
		margin-top: 20upx;
		color: #666666;
	}

	.forum_photo_box {
		width: 100%;
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap
	}

	.photo_item {
		width: 165upx;
		height: 165upx;
		margin-bottom: 15upx;
		margin-right: 12upx;
		border-radius: 8upx;
	}

	.forum_time {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.text_input {
		height: 60upx;
		border: 1px solid white;
		border-radius: 30upx;
		background-color: #d5d5d5;
	}

	input {
		padding-left: 30upx
	}

	.bottom_box {
		position: fixed;
		bottom: 40upx;
		right: 40upx;
		z-index: 99;
		width: 70upx;
		height: 70upx;
		border-radius: 40upx;
		color: white;
		font-weight: normal;
		background-color: #55aaff;
		line-height: 60upx;
		text-align: center;
		font-size: 50upx;
		box-shadow: #888888 5upx 5upx 5upx;
		border: 5upx solid #ffffff;
	}
</style>
